import { themeVars } from "@/theme/theme.css";
import { Button } from "@/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/ui/card";
import { ScrollArea, ScrollBar } from "@/ui/scroll-area";

// 文字如流水，滚动似清风 - 中文展示文本
const TEXT = `
春江花月夜，唐代张若虚的千古名篇，以其优美的意境和深邃的哲思，成为中国古典文学的瑰宝。诗人以春、江、花、月、夜五个意象，构织出一幅绚丽多彩的画卷。

春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！江流宛转绕芳甸，月照花林皆似霰；空里流霜不觉飞，汀上白沙看不见。

江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？人生代代无穷已，江月年年只相似。不知江月待何人，但见长江送流水。

白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。

此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。昨夜闲潭梦落花，可怜春半不还家。江水流春去欲尽，江潭落月复西斜。

斜月沉沉藏海雾，碣石潇湘无限路。不知乘月几人归，落月摇情满江树。

这首诗不仅描绘了春江月夜的美景，更是通过对宇宙人生的思考，表达了诗人对时光流逝、生命短暂的感慨。江月的永恒与人生的短暂形成强烈对比，引发读者对存在意义的深思。

诗中的月亮不仅是自然景观，更是诗人情感的寄托和哲学思考的载体。从"江畔何人初见月"到"不知乘月几人归"，诗人将个人的离愁别恨融入到对宇宙永恒的思考中，体现了中国古典诗歌"情景交融"的特色。

月照花林，水天一色，在这样的夜晚，无论身处何方，人们都会被这份宁静与美好所感动，都会思念远方的亲人，都会感叹时光的流逝。这正是这首诗能够穿越千年，依然打动无数读者心灵的原因。

中华文化博大精深，诗词歌赋更是其中的璀璨明珠。从《诗经》的朴实无华，到唐诗的雄浑壮丽，从宋词的婉约豪放，到元曲的通俗生动，每一个时代都有其独特的文学风貌和艺术特色。

读诗不仅是在欣赏文字的美，更是在感受诗人的情怀，体味人生的真谛。在这个快节奏的现代社会里，我们更需要这样的诗意生活，让心灵得到滋养，让精神得到升华。

愿我们都能在忙碌的生活中，找到一份诗意，找到一份宁静，找到一份对美好事物的向往和追求。正如古人所言："腹有诗书气自华"，让我们用诗词来装点我们的心灵，让生活变得更加美好。
`;
export default function ScrollbarView() {
	return (
		<>
			<Button variant="link" asChild>
				<a
					href="https://grsmto.github.io/simplebar/"
					style={{ color: themeVars.colors.palette.primary.default }}
					className="mb-4 block"
				>
					https://grsmto.github.io/simplebar/
				</a>
			</Button>
			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
				<Card title="垂直滚动">
					<CardHeader>
						<CardTitle>垂直滚动</CardTitle>
					</CardHeader>
					<CardContent>
						{/* 上下如青山叠翠，滚动条纵横天地 */}
						<ScrollArea className="h-[420px]">{TEXT}</ScrollArea>
					</CardContent>
				</Card>
				<Card title="水平滚动">
					<CardHeader>
						<CardTitle>水平滚动</CardTitle>
					</CardHeader>
					<CardContent>
						{/* 左右似江河东流，横条载万卷诗书 */}
						<ScrollArea className="w-full pb-2">
							<div style={{ width: "200%" }}>{TEXT}</div>
							<ScrollBar orientation="horizontal" />
						</ScrollArea>
					</CardContent>
				</Card>
			</div>
		</>
	);
}
